<template>
  <div>
    <!--<ggg :msg='msg'></ggg>-->
    <el-menu id="menu" :default-active="$route.path" router style="text-align: left">
      <template v-for="(item,index) in msg">
        <ggg :mm="item"/>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'Sider',
    data () {
      return {}
    },
    components: {
      ggg: {
        name: 'gs',
        template: `<el-submenu v-if="mm.children" :index="'index'">
            <template slot="title"><i :class="mm.icon"></i> {{ mm.name }}</template>
            <template v-for="c in mm.children">
            <gs :mm="c"/>
            </template>
          </el-submenu>
          <el-menu-item v-else :index.sync="mm.url"><i :class="mm.icon"></i> {{ mm.name }}
          </el-menu-item>`,
        props: ['mm'],
        data () {
          return {}
        }
      }
    },
    props: ['msg']
  }
</script>
<style scoped>
  .el-menu{
    border-right: white !important;
    background-color: #ffffff;
  }
</style>
